<template>
  <div>
    <div style="width: 41%;float: left">
      <h3>系统公告</h3>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="item in data" :title="item.name" :name="item.id">
          <div>{{ item.content }}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div style="width: 55%;float: right;margin-top: 30px">
      <div id="bie" style="width: 100%;height: 350px"></div>
    </div>
    <div style="width: 59%;float: right;margin-top: 30px" >
      <div id="bar" style="width: 100%;height: 350px"></div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  data() {
    return {
      activeName: [],
      data:[],
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    };
  },
  mounted() {
    this.findBySearch();
    this.intiEcharts();
    this.intiBar();
  },
  methods: {
    intiEcharts(){
      request.get("/grades/echarts/bie").then(res => {
        if (res.code === '0'){
          console.log(res.data)
          this.intiBie(res.data);
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
      request.get("/grades/echarts/bar").then(res => {
        if (res.code === '0'){
          let map =res.data;
          // console.log(map);
          this.intiBar(map.xAxis,map.yAxis);
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    findBySearch(){
      request.get("/notice").then(res => {
        if (res.code === '0'){
          this.activeName=res.data[0].id
          this.data = res.data;
        }else{
          this.$message.error({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    intiBar(xAxis,yAxis){
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '成绩分布',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxis,
            type: 'bar'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    intiBie(data){
      let chartDom = document.getElementById('bie');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '考试状态',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'left',
          orient: 'vertical'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>
